<template>
<div class="view-wrapper">
    <div class="tabs-body">
      <div class="view-inner-wrap">
				<div class="twoBox">
					<div class="activityData" >
						<el-form :model="queryParams" ref="queryForm" :inline="true"  label-width="100px">
							<el-form-item label="" prop="name">
								<el-input v-model="queryParams.name" placeholder="活动名称" clearable
									@keyup.enter.native="handleQuery" />
							</el-form-item>
							<el-form-item label="是否显示" prop="isShow">
								<el-select v-model="queryParams.isShow" placeholder="请选择" >
									<el-option v-for="item in isShowList" :key="item.id" :label="item.value" :value="item.id">
									</el-option>
								</el-select>
							</el-form-item> 
							<el-form-item>
								<el-button type="primary" icon="el-icon-search"  @click="handleQuery">搜索</el-button>
								<el-button icon="el-icon-refresh"  @click="resetQuery">重置</el-button>
							</el-form-item>
						</el-form>
            <div style="margin-bottom: 14px" class="topBtn">
              <el-button type="primary" @click="handleAdd">新增活动</el-button>
            </div>
            <ex-table ref="table" :loading="loading" :table-column="tableColumn" :table-data="tableData"
							@pageSizeChange="handleSizeChange" @currentPageChange="handleCurrentChange">
							<template v-slot:img="{ scope }">
                <div class="imgBox">
                  <img :src="scope.row.img" alt="">
                </div>
							</template>
              <template v-slot:isShow="{ scope }">
								<p v-if="scope.row.isShow == 1">显示</p>
								<p v-if="scope.row.isShow == 2">隐藏</p>
							</template>
							<template v-slot:operate="{ scope }">
                <el-button @click="handleEdit(scope.row.id)" size="small" type="primary">编辑</el-button>
                <el-button @click="handleShow(scope.row)" size="small" v-if="scope.row.isShow == 1">隐藏</el-button>
                <el-button @click="handleShow(scope.row)" size="small" v-if="scope.row.isShow == 2" type="primary">显示</el-button>
                <el-button @click="handleDelete(scope.row)" size="small" type="danger">删除</el-button>
              </template>
						</ex-table>
					</div>
				</div>
			</div>
		</div>
    <add-activities
      ref="childRef"
      v-if="addActivities"
      :id="id"
      :pathType="pathType"
      :visible.sync="addActivities"
      @success="_handleSuccess" 
    />
	</div>
</template>
<script>
import {
  selectionActivitiesList ,
  changeStatus,
  deleteBlackList,
} from '@/api/blindBox/selectionActivities'
import handlePageMixin from "@/mixins/handlePageMixin";
import addActivities from './components/addActivities'
export default {
  name: "shopDetail",
  components: {
    addActivities,
  },
  mixins: [handlePageMixin],
  data() {
    return {
      id: '',
      addActivities: false,
      pathType: 'add',
      tableData:[],
      isShowList: [
        {id: '',value: '全部',},
        {id: '1',value: '显示',},
        {id: '2',value: '隐藏',},
      ],
      queryParams: {
        isShow: '',
        name: '',
      },
      tableColumn: [{
            prop: "name", 
            label: "活动名称"
          },
          {
            label: "活动图片",
            slot: true,
            slotName: "img",
          },
          {
            prop: "url", 
            label: "活动链接",
          },
          {
            prop: "sort",
            label: "排序"
          },
          {
            label: "是否显示",
            slot: true,
            slotName: "isShow",
          },
          {
            label: "操作",
            slot: true,
            slotName: "operate",
            fixed: "right",
            width: '250'
          },
        ],
    };
  },
  watch: {
   
  },
  created() {
    this.getList()
  },
  mounted() {
  
  },
  methods: {
    /** 查询盲盒开奖名单*/
    getList() {
      this.loading = true;
      var data = {
        ...this.pageOptions,
        ...this.queryParams,
      }
      selectionActivitiesList(data).then(response => {
        const {records ,total} = response.result
        console.log('response',response)
        this.tableData = records
        this.$refs.table.pageOptions.total = total;
        this.loading = false;
      });
    },
  
    
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      // this.resetForm();
      this.$refs["queryForm"].resetFields();
      this.date = []
      console.log('this.queryParams', this.queryParams)
      this.handleQuery();
    },
    //新增精选活动
    handleAdd(){
      this.addActivities = true
      this.pathType = 'add'
    },
    handleEdit(id){
      this.addActivities = true
      this.id = id
      this.pathType = 'edit'
    },
    // 显示获取隐藏
    handleShow(row){
      if(row.isShow == 1){
        var title = '是否隐藏'
      }else if(row.isShow == 2){
        var title = '是否显示'
      }
      this.$confirm(title, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          changeStatus(row.id).then(res => {
            this.$message.success('操作成功')
            this.getList()
          })
        }).catch(() => {});
    },
    //删除
    handleDelete(row){
      this.$confirm('是否删除该活动', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteBlackList(row.id).then(res => {
            this.$message.success('操作成功')
            this.getList()
          })
        }).catch(() => {});
    },
    _handleSuccess(){
      this.getList()
    },
  },
};
</script>
<style lang="scss" scoped>
.tabs-body {
  background-color: #fff;
  padding: 20px;
}
.topBtn{
  display: flex;
  justify-content: flex-start;
}
.imgBox{
  display: flex;
  justify-content: center;
  img{
    width: 150px;
  }
}
</style>
